<template>
  <div class="login-page">
    <el-row class="full-box">
      <el-col :lg="12" :md="0"></el-col>
      <el-col :lg="12" :md="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginFormRef">
          <h1>Hello</h1>
          <h2>welcome to the Palworld</h2>
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="Please Input" :prefix-icon="User" />
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="Please Input" :prefix-icon="Lock" type="password" show-password />
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button :loading="isLoading" class="login_btn" type="primary" @click="onClickLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted } from "vue";
import type { ComponentInternalInstance } from "vue";
import { useRouter } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
import useUserStore from "@/stores/modules/user";
import { ElNotification, type FormInstance, type FormRules } from "element-plus";

// 全局对象
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const userStore = useUserStore();

// data变量
const loginForm = ref({ username: "admin", password: "123456" });
const isLoading = ref(false);
const loginFormRef = ref<FormInstance>();
const rules = ref<FormRules>({
  username: { trigger: "change", validator: checkUsername },
  password: { trigger: "change", validator: checkPassword }
});

// 生命周期
onMounted(() => {});

// method
async function onClickLogin() {
  await loginFormRef.value?.validate();
  isLoading.value = true;
  try {
    await userStore.userLogin(loginForm.value);

    ElNotification({ type: "success", title: "登录成功", message: "欢迎，尊贵的VIP用户！" });
    router.push({ query: {}, path: "/home" });
  } catch (error) {
    ElNotification({ type: "error", message: (error as Error).message });
  }
  isLoading.value = false;
}
// rule: 规则表述对象，value: 要校验的值，callback回调函数（成功则不传参，失败则传入new Error）
function checkUsername(rule: any, value: any, callback: any) {
  if (!value) {
    return callback(new Error("用户名不能为空"));
  }
  if (value.length < 3 || value.length > 10) {
    return callback(new Error("用户名必须为3位~10位数"));
  }
  callback();
}
function checkPassword(rule: any, value: any, callback: any) {
  if (!value) {
    return callback(new Error("密码不能为空"));
  }
  callback();
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover;
}
.login_form {
  position: relative;
  top: 30vh;
  width: 80%;
  padding: 40px;
  background: url("@/assets/images/login_form.png") no-repeat;
  background-size: cover;
  h1,
  h2 {
    color: #ffffff;
  }
  h1 {
    font-size: 40px;
  }
  h2 {
    margin: 20px 0;
    font-size: 20px;
  }
  .login_btn {
    width: 100%;
  }
}
</style>
